import React, { Suspense } from 'react';
import { Row, Card, Col, Breadcrumb, Calendar, Layout, Tooltip } from 'antd';
import DocumentTitle from 'react-document-title';
import { connect } from 'dva';
import { ContainerQuery } from 'react-container-query';
import classNames from 'classnames';
import Media from 'react-media';
import Context from './MenuContext';
import getPageTitle from '@/utils/getPageTitle';
import { setAuthority } from '@/utils/authority';
import { CommonStyle } from './components/style';
import { IconfontStyle } from '@/assets/iconfont/iconfont';
import router from 'umi/router';
import logo from '@/assets/images/logo.png';
import styles from './BasicLayout.less';

const { Content } = Layout;

const query = {
  'screen-xs': {
    maxWidth: 575,
  },
  'screen-sm': {
    minWidth: 576,
    maxWidth: 767,
  },
  'screen-md': {
    minWidth: 768,
    maxWidth: 991,
  },
  'screen-lg': {
    minWidth: 992,
    maxWidth: 1199,
  },
  'screen-xl': {
    minWidth: 1200,
    maxWidth: 1599,
  },
  'screen-xxl': {
    minWidth: 1600,
  },
};

class BasicLayout extends React.Component {
  componentDidMount() {
    const {
      dispatch,
      route: { routes, path, authority },
    } = this.props;

    //const user_id = localStorage.getItem('user_id');
    const user_id = sessionStorage.getItem('user_id');
    if (user_id) {
      dispatch({
        type: 'account/currentUser',
      });
    } else {
      setAuthority('guest');
      sessionStorage.clear();
      router.push('/login');
    }

    dispatch({
      type: 'setting/getSetting',
    });
    dispatch({
      type: 'menu/getMenuData',
      payload: { routes, path, authority },
    });
  }

  getContext() {
    const { location, breadcrumbNameMap } = this.props;
    return {
      location,
      breadcrumbNameMap,
    };
  }

  render() {
    const {
      layout: PropsLayout,
      children,
      location: { pathname },
      isMobile,
      menuData,
      breadcrumbNameMap,
      currentUser,
    } = this.props;
    var titleTooltip =
      currentUser.OrgParentName != '根节点'
        ? currentUser.OrgName + ' ' + currentUser.OrgParentName
        : currentUser.OrgName;

    return (
      <React.Fragment>
        <DocumentTitle title={getPageTitle(pathname, breadcrumbNameMap)}>
          <ContainerQuery query={query}>
            {params => (
              <Context.Provider value={this.getContext()}>
                <CommonStyle />
                <IconfontStyle />
                {/* <div className={styles.bg}>
                  <div className={styles.menu}>
                    <Breadcrumb className={styles.breadcrumb} separator="|">
                      <Breadcrumb.Item>当前用户：{currentUser.Name}</Breadcrumb.Item>
                      <Breadcrumb.Item>
                        <a
                          onClick={() => {
                            setAuthority('guest');
                            sessionStorage.clear();
                            router.push('/login');
                          }}
                        >
                          退出登录
                        </a>
                      </Breadcrumb.Item>
                      <Breadcrumb.Item>
                        <a href="">修改密码</a>
                      </Breadcrumb.Item>
                    </Breadcrumb>
                  </div>
                </div> */}
                <div className={styles.leaves} />
                <div className={styles.header}>
                  <div className={styles.landspaceHeaderWarpper}>
                    <div className={styles.logoWarpper}>{/* <img src={logo}/> */}</div>
                    <div className={styles.menu}>
                      <div className={styles.menuItem}>
                        <span>
                          <Tooltip placement="bottom" title={titleTooltip}>
                            当前用户：{currentUser.Name}
                          </Tooltip>
                        </span>
                        |
                        <span
                          onClick={() => {
                            setAuthority('guest');
                            sessionStorage.clear();
                            router.push('/login');
                          }}
                        >
                          退出登录
                        </span>
                        |
                        <span
                          onClick={() => {
                            router.push('/');
                          }}
                        >
                          修改密码
                        </span>
                      </div>
                      <div className={styles.menuItem}>
                        <span
                          onClick={() => {
                            router.push('/home');
                          }}
                        >
                          返回首页
                        </span>
                      </div>
                    </div>
                  </div>
                  <div className={styles.sidebar}>
                    <div
                      className={styles.sidebarItem}
                      onClick={() => {
                        router.push('/landspace/yhgl');
                      }}
                    >
                      养护管理
                    </div>
                  </div>
                </div>
                <div className={classNames(params)}>{children}</div>
              </Context.Provider>
            )}
          </ContainerQuery>
        </DocumentTitle>
      </React.Fragment>
    );
  }
}

export default connect(({ global, setting, menu: menuModel, account }) => ({
  collapsed: global.collapsed,
  layout: setting.layout,
  menuData: menuModel.menuData,
  breadcrumbNameMap: menuModel.breadcrumbNameMap,
  currentUser: account.current,
  ...setting,
}))(props => (
  <Media query="(max-width: 599px)">
    {isMobile => <BasicLayout {...props} isMobile={isMobile} />}
  </Media>
));
